<template>
  <section>

    <el-col :span="24" class="toolbar">
      <goBack></goBack>
    </el-col>
    <el-table :data="groupmembersList" v-loading="listLoading" stripe style="width: 100%">
      <el-table-column type="index" width="40">
      </el-table-column>
      <el-table-column prop="renyuan" label="人员" width="100">
      </el-table-column>
      <el-table-column prop="xingming" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="company" label="公司" width="100">
      </el-table-column>
      <el-table-column prop="zhiwei" label="职务" width="200">
      </el-table-column>
      <el-table-column prop="zhize" label="职责">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleEditUsers(scope.$index, scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button @click.native.prevent="handleUserDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"> </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑项目负责人界面-->
    <el-dialog title="编辑项目负责人" :visible.sync="editUsersFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="editUsersForm" :rules="editUsersFormRules" ref="editusersform">
        <el-form-item label="人员" width="100%">
          <el-input v-model="editUsersForm.renyuan"></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="100%">
          <el-input v-model="editUsersForm.xingming"></el-input>
        </el-form-item>
        <el-form-item label="公司" width="100%">
          <el-input v-model="editUsersForm.company"></el-input>
        </el-form-item>
        <el-form-item label="职务" width="100%">
          <el-input v-model="editUsersForm.zhiwei"></el-input>
        </el-form-item>
        <el-form-item label="职责">
          <el-input type="textarea" v-model="editUsersForm.zhize"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editUsersFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editUserSubmit" :loading="editMembersLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增项目负责人界面-->
    <el-dialog title="新增项目负责人" :visible.sync="addUsersFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="addUsersForm" :rules="addUsersFormRules" ref="addusersform">
        <el-form-item label="人员" width="100%">
          <el-input v-model="addUsersForm.renyuan"></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="100%">
          <el-input v-model="addUsersForm.xingming"></el-input>
        </el-form-item>
        <el-form-item label="公司" width="100%">
          <el-input v-model="addUsersForm.company"></el-input>
        </el-form-item>
        <el-form-item label="职务" width="100%">
          <el-input v-model="addUsersForm.zhiwei"></el-input>
        </el-form-item>
        <el-form-item label="职责">
          <el-input type="textarea" v-model="addUsersForm.zhize"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addUsersFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addUserSubmit" :loading="editMembersLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import NProgress from "nprogress";
import goBack from "@/components/public/goback";
export default {
  components: {
    goBack
  },
  data() {
    return {
      groupmembersList: [],
      listLoading: false,
      editUsersForm: {
        renyuan: "",
        xingming: "",
        company: "",
        zhiwei: "",
        zhize: ""
      },
      editUsersFormVisible: false, //责任人新增界面是否显示
      editMembersLoading: false,
      editUsersFormRules: {
        renyuan: [
          {
            required: true,
            message: "请输入负责人人员",
            trigger: "blur"
          }
        ],
        company: [
          {
            required: true,
            message: "请输入负责人公司",
            trigger: "blur"
          }
        ],
        xingming: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "blur"
          }
        ],
        zhiwei: [
          {
            required: true,
            message: "请输入负责人职务",
            trigger: "blur"
          }
        ],
        zhize: [
          {
            required: true,
            message: "请输入负责人职责",
            trigger: "blur"
          }
        ]
      },
      addUsersForm: {
        renyuan: "",
        xingming: "",
        company: "",
        zhiwei: "",
        zhize: ""
      },
      addUsersFormVisible: false, //责任人新增界面是否显示
      addMembersLoading: false,
      addUsersFormRules: {
        renyuan: [
          {
            required: true,
            message: "请输入负责人人员",
            trigger: "blur"
          }
        ],
        company: [
          {
            required: true,
            message: "请输入负责人公司",
            trigger: "blur"
          }
        ],
        xingming: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "blur"
          }
        ],
        zhiwei: [
          {
            required: true,
            message: "请输入负责人职务",
            trigger: "blur"
          }
        ],
        zhize: [
          {
            required: true,
            message: "请输入负责人职责",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    getMembers() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/groupmembers", {
          params: {
            groupid: this.$route.params.projectid
          }
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.groupmembersList = reply.data.data.list;
          } else {
            this.$message({
              message: `查询出错4，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },
    //显示负责人编辑界面
    handleEditUsers(index, row) {
      this.editUsersFormVisible = true;
      this.editUsersForm = Object.assign(this.editUsersForm, row);
    },
    //负责人编辑界面
    editUserSubmit() {
      this.$refs.editusersform.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editMembersLoading = true;
            NProgress.start();
            let params = {};
            Object.assign(params, this.editUsersForm);

            this.axios.post("/groupmembers/update", params).then(reply => {
              this.editMembersLoading = false;
              NProgress.done();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "编辑成功",
                  type: "success"
                });
                this.$refs["editusersform"].resetFields();
                this.editUsersFormVisible = false;
                this.getMembers();
              } else {
                this.$message({
                  message: `保存失败，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },
    //删除负责人
    handleUserDel: function(index, row) {
      this.$confirm("确认删除该负责人吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        this.axios
          .post("/groupmembers/delete", {
            memberid: row.memberid
          })
          .then(reply => {
            this.listLoading = false;
            NProgress.done();
            if (reply.data.status === 0) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success"
              });
              this.getMembers();
            } else {
              this.$message({
                message: `删除失败，错误码${reply.data.status},请联系管理员`,
                type: "warning"
              });
            }
          });
      });
    }
  },
  mounted() {
    this.getMembers();
  }
};
</script>

